<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>你画我猜</title>
  <link rel="stylesheet" href="./css/style.css">
  <script src="./js/socket.io.js"></script>
  <script src="./js/pen.js"></script>
  <script src="./js/io.js"></script>
</head>

<body>
  <p class="title">你画我猜</p>
  <p class="problem">题目： <span>******</span></p>
  <div class="persion-con">
  </div>
  <div class="cavans-con">
    <canvas id="ca" width="800" height="500" class='pen'></canvas>
  </div>
  <div class="talk-con">
    <div class="talk-show">
    </div>
    <div class="input-con">
      <input type="text" placeholder="请输入" class="input"><button id='btn-send'>发送</button>
    </div>
  </div>
  <div class="tool-con">
    <span class="btn btn-claerCanvas">清空画布</span>
    <span class="btn btn-pen">画笔</span>
    <span class="btn btn-eraser">橡皮擦</span>
    <div class="pen-width-con">
      <span>画笔粗细：</span>
      <ul>
        <li class="li-1 width-select"><div class="li-1"></div></li>
        <li class="li-2"><div class="li-2"></div></li>
        <li class="li-3"><div class="li-3"></div></li>
        <li class="li-4"><div class="li-4"></div></li>
        <li class="li-5"><div class="li-5"></div></li>
      </ul>
    </div>
    <div class="pen-color-con">
      <span>画笔颜色：</span><input type="color" name="" value="" id="color-selector">
    </div>
  </div>
  <script src="./js/main.js"></script>
</body>

</html>